<template>
	<!-- 首页 -->
	<view>
		<u-navbar :is-back="false" :border-bottom="false">
			<view class="nav-bar">
				<view class="exam-time" v-if="countDown">距离导游考试还有{{ countDown }}天</view>
				<text>导游证考试</text>
				<view style="position: relative;" @click="jump('../notice/notice')">
					<!-- <image src="../../static/icon/bell.png"></image> -->
					<my-icon name="notice"></my-icon>
					<!-- <u-icon name="arrow-right"></u-icon> -->
					<u-badge v-if="vuex_unread_notice_count > 0" :is-dot="vuex_unread_notice_count > 0" :offset="[-4, 26]"></u-badge>
				</view>
			</view>
		</u-navbar>
		<view class="container">
			<view class="group">
				<view class="swiper-banner"><u-swiper borderRadius="0" :list="banner" :height="270"></u-swiper></view>

				<view class="sub-nav">
					<view @tap="jump(item.path)" class="item" :key="'subNav' + index" v-for="(item, index) in subNav">
						<view class="img-icon"><image :src="item.src"></image></view>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
			<view class="group new-course">
				<view class="header">
					<text>最新课程</text>
					<!-- <u-icon @click="classNav" color="#999" size="24upx" name="arrow-right" label="更多" label-color="#999" label-size="26upx" label-pos="left"></u-icon> -->
				</view>
				<view class="scroll-lib">
					<scroll-view :scroll-x="true" :show-scrollbar="false">
						<view class="scroll-container">
							<view class="item new" @click="subItemClick(item.resourceId)" v-for="(item, index) in newCourse" :key="'hotCourse' + index">
								<u-image width="100%" height="100%" :src="item.imagePath"></u-image>
								<view class="content">
									<view class="view-count">
										<my-icon name="replay" color="#fff" label-size="22upx" label-color="#fff" :label="item.studyCount.toString()"></my-icon>
										<!-- <u-icon name="eye" color="#fff" size="18upx" label-size="22upx" label-color="#fff" :label="item.studyCount.toString()"></u-icon> -->
									</view>
									<text>{{ item.resourceName }}</text>
									<text>{{ item.subName }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="group hot-course">
				<view class="header">
					<text>热门课程</text>
					<!-- <u-icon @click="classNav" color="#999" size="24upx" name="arrow-right" label="更多" label-color="#999"  label-size="26upx" label-pos="left"></u-icon> -->
				</view>
				<view class="scroll-lib">
					<scroll-view :scroll-x="true" :show-scrollbar="false">
						<view class="scroll-container">
							<view class="item" @click="subItemClick(item.resourceId)" v-for="(item, index) in hotCourse" :key="'hotCourse' + index">
								<u-image width="100%" height="100%" :src="item.imagePath"></u-image>
								<view class="content">
									<view class="view-count"><my-icon name="replay" color="#fff" label-size="22upx" label-color="#fff" :label="item.studyCount.toString()"></my-icon></view>
									<text>{{ item.resourceName }}</text>
									<text>{{ item.subName }}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
				<my-confirm ref="signModal" @confirm="handSign()" @cancel="$refs.signModal.close()" confirm-text="去打卡" cancel-text="稍后">
					你的老师布置了每日一练任务，
					<view>快去打卡吧~</view>
				</my-confirm>
	</view>
</template>

<script>
export default {
	data() {
		return {
			newCourse: [],
			hotCourse: [],
			countDown: null,
			modalShow: false,
		};
	},
	onLoad() {
		this.modalShow=uni.getStorageSync('isFirstOpen')
		let isNoviceData=JSON.parse(uni.getStorageSync('isNovice'))
		// #ifndef H5
		if(!isNoviceData.home){
			if(this.modalShow){
				this.showPopup()
			}
		}
		//  #endif
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			this.newCourse = [];
			this.hotCourse = [];
			this.countDown = null;
			return this.getPageData();
		},
		showPopup(type) {
			//  #ifndef H5
			const subNVue = uni.getSubNVueById('popup'); // 通过 id 获取 nvue 子窗体
			subNVue.show(); // 打开 nvue 子窗体
			// #endif
		},
		jump(path) {
			uni.navigateTo({
				url: path
			});
		},
		getPageData() {
			return new Promise((resolve, reject) => {
				this.request
					.get('/app/home/GetHotAndNewVideo')
					.then(res => {
							//教师端打卡弹窗
						let isNoviceData=JSON.parse(uni.getStorageSync('isNovice'))
						let curTaskDay=(new Date().getMonth()+1)+''+new Date().getDate();//当前天
						let setTaskDay=uni.getStorageSync('todayClick'); //缓存天
						// 当前天是否点击打卡弹窗
						if(res.teaTaskToday==1 && curTaskDay!=setTaskDay){
							if(this.modalShow && !isNoviceData.home) return;
							uni.setStorageSync('todayClick',curTaskDay)
							this.$nextTick(function(){
								this.$refs.signModal.open();
							})
						}
						this.newCourse = res.newVideoList;
						this.hotCourse = res.hotVideoList;
						this.countDown = res.time;
						this.updateUnreadNoticeCount(res.read);
						resolve();
					})
					.catch(reject);
			});
		},
		handSignCancel(){
			uni.setStorageSync('teaTaskToday',0)
		},
		// 跳转打卡
		handSign(){
			uni.setStorageSync('teaTaskToday',0)
			this.$nextTick(function(){
				this.$refs.signModal.close();
			})
			uni.navigateTo({
				url: '/pages/dailyPractice/dailyPractice?type=1'
			});
		},
		// 点击跳转
		subItemClick(data) {
			uni.navigateTo({
				url: '/pages/classroom/subjectDetail?resourceId=' + data
			});
		},
		classNav() {
			uni.switchTab({
				url: '../classroom/classroom'
			});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.container {
	padding-bottom: 2upx;
}
.icon-notice {
	background: linear-gradient(to bottom, #fc7767, #ec412f);
	-webkit-background-clip: text;
	color: transparent;
	float: right;
	margin-right: 30upx;
	font-size: 40upx;
}
.icon-replay {
	font-size: 16upx;
	// transform:scaleX(.6,.6);
}
.nav-bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 100%;
	* {
		flex: 1;
		text-align: center;
		line-height: 46upx;
		max-width: 33.333%;
	}
	text {
		font-size: 34upx;
	}
	image {
		width: 35upx;
		height: 42upx;
		margin-right: 30upx;
		float: right;
	}
}
.group {
	padding: 0;
	margin-bottom: 20upx;
	background: #ffffff;
}
.scrollnow {
	height: 105% !important;
}
.exam-time {
	/* margin-right: 20upx; */
	padding: 0 20upx;
	box-sizing: border-box;
	font-size: 20upx;
	text-align: center;
	background: rgba(244, 92, 75, 0.15);
	border-radius: 0 23upx 23upx 0;
	color: #f45c4b;
}
/deep/.uni-scroll-view{
	z-index: 1;
}
.u-swiper-wrap {
	border-radius: 24upx !important;
	overflow: hidden;
}
.sub-nav {
	padding: 40upx 0;
	display: flex;
	align-items: center;
	justify-content: center;
	.item {
		flex: 1;
		display: inherit;
		flex-direction: column;
		align-items: inherit;
		justify-content: inherit;
		text {
			margin-top: 20upx;
			font-size: 26upx;
			font-weight: 400;
			color: #4c5059;
		}
		.img-icon {
			width: 86upx;
			height: 86upx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: linear-gradient(rgba(252, 119, 103, 1), rgba(236, 65, 47, 1));
			border-radius: 50%;
			image {
				width: 48upx;
				height: 38upx;
			}
			image:nth-child(1) {
				width: 52upx;
				height: 38upx;
			}
			image:nth-child(4) {
				width: 50upx;
				height: 40upx;
			}
		}
	}
}
[class*='course'] {
	padding-bottom: 40upx;
	padding-left: 26upx !important;
	padding-right: 0 !important;
	.header {
		line-height: 114upx;
		display: flex;
		padding-right: 26upx;
		align-items: center;
		text {
			flex: 1;
			font-size: 36upx;
			font-weight: 500;
			color: #363940;
		}
	}
}
.swiper-banner {
	padding: 0 26upx;
}
.scroll-lib {
	height: 176upx;
	overflow: hidden;
}
.scroll-container {
	display: flex;
	flex-wrap: nowrap;
	height: 190upx;
	margin-bottom: 30upx;
	.item {
		position: relative;
		z-index: 99;
		min-width: 286upx;
		height: 176upx;
		margin-right: 18upx;
		border-radius: 10upx;
		overflow: hidden !important;
		.u-image {
			z-index: -1;
		}
		.content {
			width: 100%;
			height: 100%;
			position: absolute;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			top: 0;
			left: 0;
			color: white;
			.view-count {
				display: flex;
				justify-content: flex-end;
				padding: 10upx;
				align-items: center;
			}
			text {
				display: block;
				text-align: center;
				font-size: 32upx;
				font-weight: 600;
				overflow: hidden;
				margin: 0 auto;
				width: 221upx;
				max-height: 80upx;
				line-height: 40upx;
				vertical-align: middle;
			}
			text:last-child {
				font-size: 22upx;
				flex: unset;
				font-weight: 400;
				margin-bottom: 12upx;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}
.new::before {
	content: 'new';
	position: absolute;
	top: 0;
	left: 0;
	height: 30upx;
	line-height: 30upx;
	padding: 0upx 16upx 0 10upx;
	text-align: center;
	background: $linear-bg;
	clip-path: polygon(0% 0%, 0% 100%, calc(100% - 10upx) 100%, 100% 0%);
	font-size: 22upx;
	font-weight: 400;
	color: #ffffff;
	z-index: 1;
}
/deep/ .u-navbar {
	background: white !important;
}
</style>
